<template>
	<view class="d-flex" style="height: 100%; box-sizing: border-box;">
		<!--  -->
		<view class="flex-1" style="position: relative; background-color: #efefef;">
			<view style="position: absolute; right: 0; top: 0; bottom: 0; width: 60upx; background-color: #fff;"></view>
			<scroll-view  scroll-y id="left-scroll-view" 
				style="z-index: 10; position: absolute; right: 0; top: 0; bottom: 0; left: 0; z-index: 10;"
			>
				<view v-for="(item, index) in listData.data" :key="index" 
					class="left-scroll-item"
					:class="{ 
						'left-scroll-item-active': listData.leftActiveIndex === index,
						'left-scroll-item-active-top-radius': listData.leftActiveIndex === index && index!=0,
						'left-scroll-item-active-bottom-radius': listData.leftActiveIndex === index && index!=(listData.data.length - 1),
						'left-scroll-item-active-of-top': listData.leftActiveIndex === (index-1),
						'left-scroll-item-active-of-bottom': listData.leftActiveIndex === (index+1)
					}"
					:scroll-top="listData.leftScrollTop"
					@tap="tapLeftScrollItem(index)"
				><image v-if="listData.leftActiveIndex === index" src="/static/images/menu-text-left-img.png" style="width:15upx; height: 50upx; position: relative;left: 7upx; top: 2upx;" mode="aspectFill"></image><text>{{ item.text }}</text></view>
			</scroll-view>
		</view>
		<view style="flex: 2.5; position: relative;">
			<scroll-view
				style="z-index: 10; position: absolute; right: 0; top: 0; bottom: 0; left: 0;"
				scroll-y
				id="right-scroll-view"
				:scroll-top="listData.rightScrollTop"
				:scroll-with-animation="true"
				@scroll="scrolllRight"
			>
				<view v-for="i in 40" :key="i" class="right-scroll-item" >
					123456
	<!-- 				<view>{{ item.text }}</view>
					<view class="d-flex flex-wrap catetory-item-container">
						<view v-for="(subItem, index) in item.list" class="span24-8 catetory-item" >
							<image :src="subItem.src" style="height: 380upx;" mode="widthFix"/>
							<text style="text-align: center;">{{ subItem.text }}</text>
						</view>
					</view> -->
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import { waitTimeout } from '@/common/utils/tools'
	export default {
		data() {
			return {
				timer: null,
				listData: {
					leftActiveIndex: 0,
					letfScrollItemDomTopArr: [], // 左边scroll-item元素在scroll-view中的top值
					rightScrollItemDomTopArr: [], // 右边scroll-item元素在scroll-view中的top值
					leftScrollTop: 0, // 左边scroll-views 设置纵向滚动条位置
					rightScrollTop: 0, // 右边scroll-views 设置纵向滚动条位置
					leftScrollViewDomInfo: {},
					data: []
				}
			}
		},
		onLoad() {
			this.getData()
		},
		watch: {
			'listData.leftActiveIndex': function(nV, oV) {
				console.log('to get new right menu list', nV)
				// 获取右侧的内容
			} 
		},
		methods: {
			async getData() {
				for(let i=0; i<20; i++) {
					// const list = []
					// for (let j=0; j<(parseInt(Math.random()*12) + 1); j++) {
					// 	list.push({
					// 		src: '/static/images/demo/cate_04.png',
					// 		text: `产品${i}-${j}`
					// 	})
					// }
					this.listData.data.push({
						text: `分类${i}`
					})
				}
				await waitTimeout(50)
				// 计算 dom的位置信息
				// const leftScrollItemDomArrInfos = await this.getElInfo({ size: true, rect: true, scrollOffset: true}, '.left-scroll-item')
				// const rightScrollItemDomArrInfos = await this.getElInfo({ size: true, rect: true, scrollOffset: true}, '.right-scroll-item')
				// const leftScrollDomInfo = await this.getElInfo({ size: true, rect: true, scrollOffset: true }, '#left-scroll-view')
				// this.listData.letfScrollItemDomTopArr = leftScrollItemDomArrInfos.map(item => item.top)
				// this.listData.rightScrollItemDomTopArr = rightScrollItemDomArrInfos.map(item => item.top)
				// this.listData.leftScrollViewDomInfo = leftScrollDomInfo[0]
				// console.log(this.listData)
				// console.log('leftScrollItemDomArrInfos:', leftScrollItemDomArrInfos)
				// console.log('rightScrollItemDomArrInfos:', rightScrollItemDomArrInfos)
				// console.log('leftScrollDomInfo:', leftScrollDomInfo)
			},
			tapLeftScrollItem(index) {
				this.listData.leftActiveIndex = index
				// // 调整右边scroll-view的位置
				// this.listData.rightScrollTop = this.listData.rightScrollItemDomTopArr[index]
			},
			getElInfo(opts = {}, select){
				// const idOrClass = select.startWith('#') ? 'id' : 'class'
				return new Promise((res,rej)=>{
					let option = {
						size: opts.size ? true : false,
						rect: opts.rect ? true : false,
						scrollOffset: opts.scrollOffset ? true : false,
					}
					const query = uni.createSelectorQuery().in(this);
					// let q = obj.all ? query.selectAll(`.${obj.all}-scroll-item`):query.select('#leftScroll')
					let q = query.selectAll(select)
					q.fields(option,data => {
					  res(data)
					}).exec();
				})
			},
			scrolllRight(e) {
				clearTimeout(this.timer)
				this.timer = setTimeout(() => {
					// for(let i= (this.listData.rightScrollItemDomTopArr.length - 1); i>=0; i--) {
					// 	const v = this.listData.rightScrollItemDomTopArr[i]
					// 	console.log('vvv', v, e.detail.scrollTop + 3 )
					// 	if ( v < e.detail.scrollTop) {
					// 		this.listData.leftActiveIndex = i
					// 		return false
					// 	}
					// }
					// this.listData.rightScrollItemDomTopArr.forEach((v,k)=>{
					// 	if (v < e.detail.scrollTop + 3) {
					// 		this.listData.leftActiveIndex = k
					// 		return false
					// 	}
					// })
				}, 300)
			}
		}
	}
</script>

<style lang="scss" scoped>
.left-scroll-item {
	display: flex;
	justify-content: center;
	align-items: center;
	line-height: 100upx;
	font-size: 30upx;
	// border-bottom-width: 1upx;
	// border-bottom-color: #efefef;
	// border-bottom-style: solid;
	// border-left-width: 8upx;
	// border-left-color: #fff;
	// border-left-style: solid;
	box-sizing: border-box;
	background-color: #efefef;
	color: #444;
}
.left-scroll-item-active {
	background-color: #fff;
	// border-top-left-radius: 20upx;
	// border-bottom-left-radius: 20upx;
}
.left-scroll-item-active-top-radius {
	border-top-left-radius: 20upx!important;
}
.left-scroll-item-active-bottom-radius {
	border-bottom-left-radius: 20upx;
}

.left-scroll-item-active-of-top {
	border-top-right-radius: 30upx;
}
.left-scroll-item-active-of-bottom {
	border-bottom-right-radius: 30upx;
}

.catetory-item {
	height: 350upx;
	background-color: #fff;
	// border: 1px solid #eee;
	box-sizing: border-box;
}
.right-scroll-item {
	padding: 20upx 10upx;
}
</style>
